<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>增加商品</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../../style/index.css">
</head>

<body>
    <div id="app" class="minWidth">
        <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> -->
            <!-- <el-tab-pane label="集团统一" name="first"> -->
                <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%">
                    <div class="table_titel">
                        <div class="titel">基本信息</div>
                    </div>
                    <el-descriptions :column="2" :rules="rules" border size="small">
                        <el-descriptions-item label="被制卡企业">
                            <el-form-item>
                                <el-select @change="EnterChange" style="width: 100%;"
                                    v-model="form.Buyer_Enterprise_Info_SerialNumber" clearable placeholder="请选择被制卡企业">
                                    <el-option v-for="item in Enterprises" :key="item.Enterprise_Info_SerialNumber"
                                        :label="item.Enterprise_Name" :value="item.Enterprise_Info_SerialNumber">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="制卡数量">
                            <el-form-item>
                                <el-input clearable v-model.trim="form.Gift_Card_Quantity"
                                    placeholder="请输入礼品卡数量"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="礼品卡标题">
                            <el-form-item>
                                <el-input clearable v-model.trim="form.Gift_Card_Scheme_Name"
                                    placeholder="请输入礼品卡标题"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="生效时间">
                            <el-form-item prop="Delivery_Time">
                                <el-date-picker v-model="form.Start_Date" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生效时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="结束时间">
                            <el-form-item prop="End_Date">
                                <el-date-picker v-model="form.End_Date" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="选择版面">
                            <el-form-item>
                                <el-select @change="SelectChange" style="width: 100%;"
                                    v-model="form.Gift_Card_Page_SerialNumber" clearable placeholder="请选择版面">
                                    <el-option v-for="item in Cardpages" :key="item.Prepayment_Card_Page_SerialNumber"
                                        :label="item.Prepayment_Card_Page_Name"
                                        :value="item.Prepayment_Card_Page_SerialNumber">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="适用商品数量（0：可领取全部商品）">
                            <el-form-item>
                                <el-input clearable v-model.trim="form.Gift_Card_Article_Quantity"
                                    placeholder="请输入适用商品数量"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="版面">
                            <el-form-item>
                                <div style="border: 1px solid #ccc;width: 300px;">
                                    <el-image v-if="CardpagesImg==''">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                    <el-image v-else style="height: 100%;width: 300px;" :src="DomainIMG + CardpagesImg"
                                        :preview-src-list="srcList">
                                    </el-image>
                                </div>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                    <div class="table_titel">
                        <div class="titel">选择适用商品</div>
                        <div>
                            <el-button size="small" type="success" @click="add_gift_card_scheme_article">增加</el-button>
                            <el-button size="small" type="danger" @click="del_gift_card_scheme_article">删除</el-button>
                        </div>
                    </div>
                    <el-descriptions :column="2" border size="small">
                        <el-descriptions-item label="商品分类方式">
                            <el-form-item>
                                <el-select @change="CategorysChange" style="width: 100%;" v-model="cagie" clearable
                                    placeholder="请选择商品分类方式">
                                    <el-option v-for="item in Categorys" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="适用商品类">
                            <el-form-item>
                                <el-select multiple v-if="cagie==''" style="width: 100%;" v-model="Articles" clearable
                                    placeholder="请选择适用商品类(可多选)">
                                    <el-option v-for="item in ArticleByCategorys" :key="item.Category_SerialNumber"
                                        :label="item.Category_Name" :value="item.Category_SerialNumber">
                                    </el-option>
                                </el-select>
                                <el-select @change="ArticlesChange" multiple v-if="cagie=='0'" style="width: 100%;"
                                    v-model="Articles" clearable placeholder="请选择适用商品类(可多选)">
                                    <el-option v-for="item in ArticleByCategorys" :key="item.Category_SerialNumber"
                                        :label="item.Category_Name" :value="item.Category_SerialNumber">
                                    </el-option>
                                </el-select>
                                <el-select @change="ArticlesChange" multiple v-if="cagie=='1'" style="width: 100%;"
                                    v-model="Articles" clearable placeholder="请选择适用商品类(可多选)">
                                    <el-option v-for="item in ArticleByCategorys" :key="item.Brand_SerialNumber"
                                        :label="item.Brand_Name" :value="item.Brand_SerialNumber">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions :style="form.Children.gift_card_scheme_article.length-1==index?'margin-bottom: 10px;':''" 
                        v-for="(item,index) in form.Children.gift_card_scheme_article" :key="index" :column="2" :rules="rules" border size="small">
                        <el-descriptions-item label="选择商品" >
                            <el-form-item >
                            <el-select filterable remote v-if="cagie==''" style="width: 100%;" v-model="item.Article_SerialNumber" clearable
                                placeholder="请选择商品">
                                <el-option v-for="item in tableData" :key="item.value" :label="item.Article_Name"
                                    :value="item.Article_SerialNumber">
                                </el-option>
                            </el-select>
                            <el-select filterable remote @change="GoodsChange" v-if="cagie=='0'" style="width: 100%;"
                                v-model="item.Article_SerialNumber" clearable placeholder="请选择类别商品">
                                <el-option v-for="item in tableData" :key="item.value" :label="item.Article_Name"
                                    :value="item.Article_SerialNumber">
                                </el-option>
                            </el-select>
                            <el-select filterable remote @change="GoodsChange" v-if="cagie=='1'" style="width: 100%;"
                                v-model="item.Article_SerialNumber" clearable placeholder="请选择品牌商品">
                                <el-option v-for="item in tableData" :key="item.value" :label="item.Article_Name"
                                    :value="item.Article_SerialNumber">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="赠送数量">
                            <el-form-item>
                                <el-input clearable v-model.trim="item.Quantity"
                                    placeholder="请输入赠送数量"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                    
                        <!-- <el-table :data="tableData.slice((IO_form.page-1)*IO_form.limit,IO_form.page*IO_form.limit)" border
                            style="width: 100%;margin-top: 50px;">
                            <el-table-column align="center" prop="date" label="商品图片" width="180">
                                <template v-slot="{row}">
                                    <div style="display: flex;justify-content: center;">
                                        <img style="width: 100px;height: 100px;" :src="DomainIMG + row.Picture_URL" alt="">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="Article_Name" label="商品名称">
                            </el-table-column>
                            <el-table-column align="center" prop="Category_Name" label="商品类别" width="180">
                            </el-table-column>
                            <el-table-column align="center" prop="Brand_Name" label="商品品牌">
                            </el-table-column>
                            <el-table-column align="center" label="操作">
                                <template slot-scope="scope">
                                    <el-button size="small" type="danger" @click="Delete(scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="display: flex;justify-content: flex-end;">
                            <el-pagination background v-show="total1 > 0" @size-change="handleSizeChange1"
                                @current-change="handleCurrentChange1" :current-page="IO_form.page"
                                :page-sizes="[10,20,30,50]" :page-size="IO_form.limit"
                                layout="total, sizes, prev, pager, next, jumper" :total="total1">
                            </el-pagination>
                        </div> -->
                    <div class="table_titel" style="display: flex;justify-content: space-between;">
                        <div class="titel">适用店铺</div>
                        <div>
                            <el-button size="small" type="success" @click="AddStore">增加</el-button>
                            <el-button size="small" type="danger" @click="RdcStore">删除</el-button>
                        </div>
                    </div>
                    <el-descriptions :style="form.Children.gift_card_scheme_storescope.length-1==index?'margin-bottom: 100px;':''"
                     :column="2" :rules="rules" border size="small"
                        v-for="(item,index) in form.Children.gift_card_scheme_storescope" :key="index">
                        <el-descriptions-item label="适用店铺">
                            <el-form-item>
                                <el-select style="width: 100%;" v-model="item.Store_SerialNumber" clearable
                                    placeholder="请选择适用店铺">
                                    <el-option v-for="item in Stores" :key="item.Store_SerialNumber"
                                        :label="item.Store_Name" :value="item.Store_SerialNumber">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-form-item class="form-operation">
                        <el-button @click="window.history.back()">返回</el-button>
                        <el-button type="primary" @click="submit('contract')" :loading="loading">提交</el-button>

                    </el-form-item>
                </el-form>
            <!-- </el-tab-pane> -->
         
        <!-- </el-tabs> -->
    </div>
    <script type="text/javascript" src="../../../../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../../utils/FileSaver.min.js"></script>
    <script type="text/javascript" src="../../../../utils/FileSaver.js"></script>
    <script type="text/javascript" src="../../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="./js/Add.js"></script>
</body>

</html>